<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 68%;margin-left: 16%;margin-top: 4%;">
    选择属性：<select style="border: 1px solid #ddd;border-radius: 4px;background: transparent;outline: none;height: 30px;width: 79%;" id="mySelect"></select>
</div>
<div style="
        margin-top: 4%;
        width: 100%; /*宽度是要的，否则怎么水平居中呢？高度同理*/
        height: 100%; /*保险起见，还可以给子元素img设置最大宽高*/
        text-align: center;
        vertical-align: middle;
        font-size: 0"><img id="myImage" src="" alt="" style="width: 400px;height: 600px;" ></div>
</body>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var filePath = [[${filePath}]];
    var prefix ="/leaflet/map";
    console.log(filePath)
    $.post(prefix + "/getsx",{filePath:filePath}, function (data) {
        console.log("调用展示GIF方法")//调用展示GIF方法
        if(data.length>0){
            $.modal.loading("加載中");
            //var prefix ="/leaflet/map";
            $.post(prefix + "/getmappng",{filePath:filePath,sx:data[0]}, function (data) {
               // console.log(data)
                $.modal.closeLoading();
                document.getElementById('myImage').src = 'data:image/gif;base64,'+data;
            })
        }else{
            $.modal.msgWarning("未找到预览文件！");
            return;
        }
        for(var i=0;i<data.length;i++){
            if(data[i].includes("lon")){
                return
            }
            if(data[i].includes("lat")){
                return;
            }
            if(data[i].includes("time")){
                return;
            }
            //先创建好select里面的option元素
            var option=document.createElement("option");
            //转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
            $(option).val(data[i]);
            //给option的text赋值,这就是你点开下拉框能够看到的东西
            $(option).text(data[i]);
            //获取select 下拉框对象,并将option添加进select
            $('#mySelect').append(option);
        }
    })
    document.getElementById('mySelect').addEventListener('change', function(event) {
        var selectedValue = event.target.value; // 获取选中的值
       // console.log('Selected value is: ' + selectedValue);
        // 在这里处理选中事件
        jzGIF(selectedValue);//调用展示GIF方法
    });

    function jzGIF(sx){
        $.modal.loading("加載中");
        $.post(prefix + "/getmappng",{filePath:filePath,sx:sx}, function (data) {
            //console.log(data)
            $.modal.closeLoading();
            document.getElementById('myImage').src = 'data:image/gif;base64,'+data;
        })
    }

</script>
</html>